<template>
  <div>
    <div class="help-banner">
      <h1>猪爸爸起名平台</h1>
      <h3>帮助中心</h3>
    </div>
    <div class="head">
      <el-page-header @back="goBack"></el-page-header>
    </div>
    <div class="m-detail-box">
      <h3>{{content.title}}</h3>
      <p v-html="content.text" class="con"></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: {}
    };
  },
  created() {
    let data = this.$route.query.data;
    this.content = JSON.parse(decodeURIComponent(data));
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style >
.con {
  margin-top: 15px;
  font-size: 14px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: rgba(132, 132, 132, 1);
  line-height: 24px;
}

.con img {
  width: 340px;
  height: 170px;
}

.m-detail-box h3 {
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: rgba(103, 103, 103, 1);
}
.m-detail-box {
  padding: 10px 15px;
}
.head {
  padding: 20px 5px;
}
.help-banner h1 {
  font-size: 42px !important;
}
.help-banner h3 {
  font-size: 32px !important;
  margin-top: 26px !important;
}
.help-banner {
  height: 150px !important;
}
.help-banner h3 {
  font-size: 54px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-top: 52px;
}
.help-banner h1 {
  font-size: 60px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
}
.help-banner {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../../assets/images/help-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
